<template>
  <div>
    <a-menu
      :mode="mode"
      :theme="theme"
      :selected-keys="defaultSelectedKeys"
      :open-keys.sync="defaultOpenKeys"
      :class="[className]"
    >
      <template v-for="menuItem in sideBarConfig">
        <a-menu-item
          v-if="!menuItem.children"
          :key="menuItem.path"
          @click="data => onItemClick(data, menuItem.target)"
        >
          <template v-if="menuItem.iconClassName.match('gsd-icon')">
            <i :class="[menuItem.iconClassName]"></i>
          </template>
          <template v-else>
            <a-icon :type="menuItem.iconClassName" />
          </template>
          <span>{{ menuItem.name }}</span>
        </a-menu-item>
        <a-sub-menu v-else :key="menuItem.path">
          <span slot="title">
            <template v-if="menuItem.iconClassName.match('gsd-icon')">
              <i :class="[menuItem.iconClassName]"></i>
            </template>
            <template v-else>
              <a-icon :type="menuItem.iconClassName" />
            </template>
            <span>{{ menuItem.name }}</span>
          </span>
          <template v-for="menuSubItem in menuItem.children">
            <a-menu-item
              v-if="!menuSubItem.children"
              :key="menuSubItem.path"
              @click="onItemClick"
            >
              {{ menuSubItem.name }}
            </a-menu-item>
            <a-sub-menu
              v-else
              :key="menuSubItem.path"
              :title="menuSubItem.name"
            >
              <a-menu-item
                v-for="menuSubInnerItem in menuSubItem.children"
                :key="menuSubInnerItem.path"
                @click="onItemClick"
                >{{ menuSubInnerItem.name }}
              </a-menu-item>
            </a-sub-menu>
          </template>
        </a-sub-menu>
      </template>
    </a-menu>
    <!--    <div-->
    <!--      v-if="isInlineMode"-->
    <!--      class="sub-sidebar__iconbox"-->
    <!--      @click="toggleSideBar"-->
    <!--    >-->
    <!--      <a-icon-->
    <!--        v-if="isShowTriggerIcon"-->
    <!--        class="sub-sidebar__trigger"-->
    <!--        :type="isSideBarCollapse ? 'menu-unfold' : 'menu-fold'"-->
    <!--      >-->
    <!--      </a-icon>-->
    <!--    </div>-->
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'IocSidebar',

  props: {
    mode: {
      type: String,
      default: 'inline'
    },
    theme: {
      type: String,
      default: 'dark'
    },
    className: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      // defaultActive: ''
      defaultOpenKeys: []
    }
  },

  computed: {
    ...mapState('global', {
      isSideBarCollapse: 'isSideBarCollapse',
      sideBarConfig: 'sideBarConfig',
      currentEntry: 'currentEntry',
      entry: 'entry',
      sidebarMap: 'sidebarMap',
      menuMode: 'menuMode',
      isShowSideBar: 'isShowSideBar',
      isShowTriggerIcon() {
        return this.menuMode === 'inline' && this.isShowSideBar !== false
      },
      isInlineMode() {
        return this.menuMode === 'inline'
      }
    }),
    defaultSelectedKeys() {
      const { path, params } = this.$route
      return this.setDefaultSelectedKeys(path, params) || []
    }
  },

  methods: {
    toggleSideBar() {
      this.$store.dispatch(this.$storeGlobalTypes.TOGGLE_SIDE_BAR)
    },
    setDefaultSelectedKeys(path, params) {
      const name = path.substring(1)
      if (Object.keys(params) && !this.isSideBarCollapse) {
        this.setDefaultOpenKeys(name)
      }

      this.$store.commit(
        `global/${this.$storeGlobalTypes.SET_SIDEBAR_TITLE}`,
        name
      )

      // todo: fix自定义currentEntry不高亮的情况
      const inMap = !!this.sidebarMap[name]

      return [inMap ? name : this.currentEntry]
    },

    /**
     * 处理子菜单打开的key array
     *  输出示例：
     *    入参：a/b/c/d
     *    返回：['a', 'a/b', 'a/b/c']
     * @param path
     */
    setDefaultOpenKeys(path) {
      let split = path.split('/')
      // 去掉最后一位待处理 ['a','b','c','d'] => ['a','b','c']
      split = split.slice(0, -1)
      // ['a', 'b', 'c'] => ['a', 'a/b', 'a/b/c']
      const newArr = split.map((item, index, array) =>
        array.slice(0, index + 1).join('/')
      )

      this.$set(this, 'defaultOpenKeys', newArr)
    },
    onItemClick(data, target) {
      const { item, key } = data
      if (this.defaultSelectedKeys[0] === key) {
        return
      }

      this.$store.commit(
        `global/${this.$storeGlobalTypes.SET_CURRENT_ENTRY}`,
        ''
      )

      if (target === '_blank') {
        window.open(key)
        return
      } else if (target === '_top') {
        window.location.href = key
        return
      }

      // 需要传递出去的事件：选择后触发
      this.$emit('sidebar-selected', item, () => {
        console.log(item, key, target, 'tes1t')
        if (this.$router) {
          this.$router.push(`/${key}`)
        }
      })
    }
  }
}
</script>

<style lang="scss" src="./index.scss"></style>
